<template>
  <el-card
    class="box-card"
    shadow="hover"
    :body-style="{ padding: '0 15px', height: '382px' }"
  >
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">最新游戏</span>
        <span class="rjfl-more" @click="gotoRouter('/game/index.html',$router,{type:1})"
          >更多
        </span>
      </div>
    </template>
    <div class="newest-game">
      <div
        class="one"
        v-for="i in 8"
        :key="i"
        @click="data[i - 1] && gotoDetail(data[i - 1], $router, axios)"
      >
        <img :src="data[i - 1].icon" />
        <span class="name">{{ data[i - 1].name }}</span>
        <span class="desc">{{ data[i - 1].thirdStageName }}</span>
        <button
          class="button is-theme-button"
          style="height: 24px; width: 70px; z-index: 1"
           @click.stop="downloadUrl(data[i - 1].highSpeedUrlOne,data[i - 1].id)"
        >
          下载
        </button>
        <div class="one-bg"></div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="less">
.newest-game {
  display: flex;
  flex-flow: wrap;
  flex-wrap: row;
  align-items: center;
  justify-content: center;

  .one {
    width: 120px;
    height: 150px;
    margin: 15px 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    img {
      z-index: 1;
      position: relative;
      width: 88px;
      height: 88px;
      border-radius: 8px;
      margin-bottom: 7px;
    }

    &:hover img {
      width: 100px;
      height: 100px;
      transition: all 0.1s;
      opacity: 0.6;
    }

    .name {
      z-index: 1;
      position: relative;
      font-size: 14px;
      font-weight: bold;
      color: #1d2127;
      line-height: 14px;
    }
    &:hover .name {
      color: @link-color;
    }
    .desc {
      z-index: 1;
      position: relative;
      margin-top: 7px;
      margin-bottom: 7px;
      font-size: 12px;
      font-weight: 400;
      color: #93999e;
      line-height: 12px;
    }

    .one-bg {
      z-index: 0;
      position: absolute;
      width: 120px;
      height: 150px;
      top: 15px;
      background: #f5f7f8;
      border-radius: 11px 8px 8px 8px;
    }

    &:hover .one-bg {
      width: 125px;
      height: 160px;
      transition: all 0.1s;
    }
    &:hover .button {
      background-color: @theme-color;
      color: #fff;
    }
  }
}
</style>
